<template>
    <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <i class="box-title-icon fontColor" :class="content.icon"></i>
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleTodoClick">
                        <el-tab-pane :label="content.name" name="first">
                            <div class="tabs-content-box">
                                <el-table :data="doneList" :show-header="false" style="width: 100%;font-size:14px;" tooltip-effect="dark">
                                    <el-table-column width="40">
                                        <template slot-scope="scope">
                                            <div class="todo-tag" v-bind:class="'todo-tag-'+(scope.$index+1)">{{scope.$index+1}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="102" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.asingn[0]||'66'}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-item">
                                                <a href="javascript:void(0);" title="" @click="openMenuFunction(scope.row.url, convertTitle(scope.row.title), scope.row,true)">{{scope.row.asingn[1]||'标题'}}</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="102" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.asingn[2]||''}}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="102" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.asingn[3]||''}}</div>
                                        </template>
                                    </el-table-column>
                                    <!--<el-table-column width="30">
                                        <template slot-scope="scope">
                                            <div class="todo-delete">
                                                <i :class="deleteIcon" title="删除跟踪项" @click="removeItem(scope.row)"></i>
                                            </div>
                                        </template>
                                    </el-table-column>-->
                                </el-table>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
                <el-button class="btn-more" type="text" >
                    <a href="javascript:void(0);" title="" @click="handleTodoMore" class="fontColor">MORE</a>
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import bus from '../../common/bus';
import appUtil from '~/assets/utils/appUtil.js';
let Base64 = require('js-base64').Base64;
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('nbhsjModule');
export default {
    name: 'NewsList',
    props: ['content'],
    data() {
        return {
            activeName: 'first',
            tipsCon:'',
            todoNum: 0,
            doneNum: 0,
            doneList: [],
            deleteIcon:'el-icon-close',
        };
    },
    computed: {
        ...mapState({
            messageList:state => state.messageList,
        }),
       
    },
    created:function (){
        this.getDoneList();

    },
    methods: {
        // 已办1
        getDoneList(){
            let data = {
                userCode:appUtil.getSes('userCode'),
                roleId:Base64.decode(JSON.parse(localStorage.getItem('commonData')).svRoleId),
                name:'',
                page:1,
                rows:10,
            };
            // name是可以根据任务内容，单据id和单据类型进行模糊匹配
            this.$axios.get('/fbpm-process/center/task/done',{params:data})
                .then(response => {
                    // 系统模块###已办事项###制单人###时间
                    let param = {};
                    param= response.data.data.rows;
                    this.doneNum = response.data.data.records;
                    for(let i=0;i<param.length;i++){
                        param[i].asingn=param[i].title.split('###');
                    }
                    this.doneList = param;
                });
        },
        openMenuFunction(url,title, payload){
            if(url && title){
                this.convertAndOpen(url, title, payload);
            } else {
                this.$message.error('链接或标题为空，无法打开');
            }
        },
        // 已办打开url 转换
        convertAndOpen(url, title, payload) {
            let interfaceType = appUtil.getParamFromUrl(url, 'interfaceType');
            let commonData = sessionStorage.getItem('commonData');
            if(!commonData || commonData === 'undefined') {
                commonData = localStorage.getItem('commonData');
            }
            if(interfaceType === '1') {
                try {
                    let urlWithoutParams = url.replace(/interfaceType=1&?/, '');
                    // 如果最后一个字符是问号，就去掉
                    if (urlWithoutParams[urlWithoutParams.length - 1] === '?') {
                        urlWithoutParams = urlWithoutParams.slice(0, urlWithoutParams.length - 1);
                    }
                    this.$axios.post(urlWithoutParams, {appType: 'pc', businessKey: payload.businessKey, urlType: 'done'}).then(res => {
                        url = res.data.data.url;
                        url += url.indexOf('?') > -1 ? '&' : '?';
                        url += 'urlType=' + (payload.urlType || '') +
                      '&appCode=' + (payload.appCode || '') +
                      '&procInstId=' + (payload.procInstId || '') +
                      '&procDefId=' + (payload.procDefId || '') +
                      '&businessKey=' + (payload.businessKey || '') +
                      '&nodeId=' + (payload.nodeId || '') +
                      '&taskId=' + (payload.taskId || '') +
                      '&menuId=' + (payload.menuId || '') +
                      '&roleId=' + (Base64.decode(JSON.parse(commonData).svRoleId) || '') +
                      '&roleCode=' + (Base64.decode(JSON.parse(commonData).svRoleCode) || '');
                        let menu = {
                            url:url,
                            name:title,
                        };
                        bus.$emit('openMenu', menu);
                    });
                } catch(e) {
                    console.error(e);
                }
            } else {
                let temp = url.split('?');
                url = temp[0] + '?urlType=' + (payload.urlType || '') +
                  '&appCode=' + (payload.appCode || '') +
                  '&procInstId=' + (payload.procInstId || '') +
                  '&procDefId=' + (payload.procDefId || '') +
                  '&businessKey=' + (payload.businessKey || '') +
                  '&nodeId=' + (payload.nodeId || '') +
                  '&taskId=' + (payload.taskId || '') +
                  '&menuId=' + (payload.menuId || '') +
                  '&roleId=' + (Base64.decode(JSON.parse(commonData).svRoleId) || '') +
                  '&roleCode=' + (Base64.decode(JSON.parse(commonData).svRoleCode) || '')+
            '&done=true';
                if(temp[1]) {
                    url += ('&' + temp[1]);
                }
                let menu = {
                    url:url,
                    name:title,
                };
                bus.$emit('openMenu', menu);
            }
        },
        handleTodoClick() {
            //console.log(tab, event);
            // tabsName = tab.name;
        },
        handleTodoMore(){
            //根据所在的标签的不同，more的链接不同
            let menu = {};
            
            menu.name = '已办事项';
            let routeData = this.$router.resolve({
                path: '/MoreDone',
            });
            let url = window.location.href.split('#')[0]+routeData.href;
            menu.url = url;
            
            bus.$emit('openMenu',menu);
            
        },
        doneTipsFun(iconState){
            if(iconState === '0'){
                this.tipsCon = '添加跟踪事项';
            }else{
                this.tipsCon = '取消跟踪';
            }
        },
        doneFunction(row,iconState){
            this.$axios.post('/ptp-msg/apis/done/'+row.id).then(() => {
                if(iconState === '0'){
                    row.activeClass = '1';
                }else{
                    row.activeClass = '0';
                }
                this.getdoneList();
            });
        },
        removeItem(item){
            this.$axios.delete('/ptp-msg/apis/done/'+item.id).then(() => {
                this.todoList.forEach(function(data){
                    if(item.id === data.id){
                        data.activeClass = '0';
                    }
                });
                this.getdoneList();
            });
            
        },
        convertTitle (title) {
            return title.indexOf('-') > -1 ? '单据详情' : title;
        }
    },
    watch: {
        
        doneList:{
            handler() {
                this.$children[0].$children[0].$children[0].$forceUpdate();
            }
        }
    }
};
</script>
